import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import {
  Meta,
  Canvas,
  ArgsTable,
  Story,
} from '@storybook/addon-docs';

import { userEvent } from '@storybook/testing-library';

<Meta
  title="Components/Dropdown Button/Dropdown Group"
  component="bl-dropdown-group"
  argTypes={{
    caption: {
      control: {
        type: 'text'
      },
    },
  }}
/>

export const dropdownOpener = async ({ canvasElement }) => {
  const dropdown = canvasElement?.querySelector('bl-dropdown')
  if(dropdown.shadowRoot) {
    const button = dropdown.shadowRoot.querySelector('bl-button')
    await userEvent.click(button);
  }
}

# Dropdown Group

<bl-badge icon="check_fill">RTL Supported</bl-badge>

Dropdown Group component is a component should be used inside a bl-dropdown or bl-dropdown-group component. It is used to display an action in the these components.

export const Template = (args) => html`<bl-dropdown label="Dropdown Button">
  <bl-dropdown-item>Action outside of Group</bl-dropdown-item>
  <bl-dropdown-group caption="${ifDefined(args.caption)}">
    <bl-dropdown-item>Action 1</bl-dropdown-item>
    <bl-dropdown-item>Action 2</bl-dropdown-item>
  </bl-dropdown-group>
  <bl-dropdown-group caption="${ifDefined(args.caption)}">
    <bl-dropdown-item>Action 1</bl-dropdown-item>
    <bl-dropdown-item>Action 2</bl-dropdown-item>
  </bl-dropdown-group>
</bl-dropdown>
`

## Basic Usage

<Canvas>
  <Story name="Basic Usage" play={dropdownOpener}>
    {Template.bind({})}
  </Story>
</Canvas>

## With Caption

<Canvas>
  <Story name="With Caption" args={{ caption: "Caption" }} play={dropdownOpener}>
    {Template.bind({})}
  </Story>
</Canvas>

## RTL Support

The dropdown group component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div style="display: flex; gap: 16px;">
        <div>
          <p style="margin-bottom: 8px;">LTR (Left-to-Right)</p>
          <bl-dropdown label="Options">
            <bl-dropdown-item>Action outside of Group</bl-dropdown-item>
            <bl-dropdown-group caption="Group 1">
              <bl-dropdown-item>Action 1</bl-dropdown-item>
              <bl-dropdown-item>Action 2</bl-dropdown-item>
            </bl-dropdown-group>
          </bl-dropdown>
        </div>
        <div dir="rtl">
          <p style="margin-bottom: 8px;">RTL (Right-to-Left)</p>
          <bl-dropdown label="خيارات">
            <bl-dropdown-item>إجراء خارج المجموعة</bl-dropdown-item>
            <bl-dropdown-group caption="مجموعة 1">
              <bl-dropdown-item>إجراء 1</bl-dropdown-item>
              <bl-dropdown-item>إجراء 2</bl-dropdown-item>
            </bl-dropdown-group>
          </bl-dropdown>
        </div>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Baklava Dropdown Group RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="path/to/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .flex-container {
      display: flex;
      gap: 20px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="toggleDirection()">Toggle RTL/LTR</button>

    <div class="flex-container">
      <!-- LTR Example -->
      <div>
        <h3>LTR Dropdown Group</h3>
        <bl-dropdown label="Options">
          <bl-dropdown-item>Action outside of Group</bl-dropdown-item>
          <bl-dropdown-group caption="Group 1">
            <bl-dropdown-item>Action 1</bl-dropdown-item>
            <bl-dropdown-item>Action 2</bl-dropdown-item>
          </bl-dropdown-group>
        </bl-dropdown>
      </div>

      <!-- RTL Example -->
      <div dir="rtl">
        <h3>RTL Dropdown Group</h3>
        <bl-dropdown label="خيارات">
          <bl-dropdown-item>إجراء خارج المجموعة</bl-dropdown-item>
          <bl-dropdown-group caption="مجموعة 1">
            <bl-dropdown-item>إجراء 1</bl-dropdown-item>
            <bl-dropdown-item>إجراء 2</bl-dropdown-item>
          </bl-dropdown-group>
        </bl-dropdown>
      </div>
    </div>
  </div>

  <script>
    // Example of dynamically changing direction
    const toggleDirection = () => {
      const rtlContainer = document.querySelector('[dir="rtl"]');
      rtlContainer.dir = rtlContainer.dir === 'rtl' ? 'ltr' : 'rtl';
    };

    // Example of creating a dropdown group programmatically
    const createDropdownGroup = (isRTL) => {
      const container = document.createElement('div');
      if (isRTL) container.dir = 'rtl';

      const dropdown = document.createElement('bl-dropdown');
      dropdown.label = isRTL ? 'خيارات' : 'Options';

      const item = document.createElement('bl-dropdown-item');
      item.textContent = isRTL ? 'إجراء خارج المجموعة' : 'Action outside of Group';

      const group = document.createElement('bl-dropdown-group');
      group.caption = isRTL ? 'مجموعة 1' : 'Group 1';

      const groupItem1 = document.createElement('bl-dropdown-item');
      groupItem1.textContent = isRTL ? 'إجراء 1' : 'Action 1';

      const groupItem2 = document.createElement('bl-dropdown-item');
      groupItem2.textContent = isRTL ? 'إجراء 2' : 'Action 2';

      group.appendChild(groupItem1);
      group.appendChild(groupItem2);
      dropdown.appendChild(item);
      dropdown.appendChild(group);
      container.appendChild(dropdown);

      document.body.appendChild(container);
    };
  </script>
</body>
</html>
```

<ArgsTable of="bl-dropdown-group" />
